<template>
<div id="cart">
    <NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">我的购物车</div>

</NavBar>

  <div class="submit_big" v-for="it in item">
   <div class="checkbox_item"><van-checkbox v-model="it.selected" @click="changecheck(it)"></van-checkbox></div>
  <van-card
  :price="it.price"
  :title="it.name"
  :thumb="'/api/'+it.default_image_url"

  >
    <div slot="num">
       <div class='count'>
            <button class='add' @click='addClick(it)'>+</button>
              <span>{{it.count}}</span>
            <button class='sub' @click='subClick(it)'>-</button>
          </div>
    </div>
  </van-card>
    </div>

  <van-submit-bar  button-text="去结算" @submit="onSubmit" class="submit" :price="price1*100">
<!--  <van-checkbox v-model="checked" @change="on_selected_all">全选</van-checkbox>-->

</van-submit-bar>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {getcart} from "@/network/Users/cart";
import {putcart} from "@/network/Users/cart";
import {allcart} from "@/network/Users/cart";

export default {
components:{
  NavBar
},
name: "Cart",
  data(){
  return{
    checked:true,
    item:[],
    price1:0
  }
  },

  methods:{
totalprice(){
  console.log('我正在计算总价')
    // let price1=0
  this.price1=0
    for(var i=0; i<this.item.length; i++){
      if(this.item[i].selected===true){
        this.price1=parseInt(this.item[i].price)*parseInt(this.item[i].count)+this.price1
      }

            }
    // this.totalpricehaha =parseInt(price1*100)

  },
  onSubmit(){
    this.$toast.success('提交成功')
    this.$router.push('/orders')
  },
    return_before(){
       history.go(-1)
    },
    addClick(item) {
  this.totalprice()
      console.log('增加')
      item.count += 1;
       putcart(item.id,item.count,item.selected).then(
          res=>{
            console.log(res);
          }
      )
      // this.item.selected===true

    },
    subClick(item) {
  this.totalprice()
      if (item.count > 1) {
        item.count -= 1;
         putcart(item.id,item.count,item.selected).then(
          res=>{
            console.log(res);
          }
      )
      } else {
        // this.$toast.show('商品数量不能再减少啦',1500)
      }

    },
    changecheck(item){
  this.totalprice()
      putcart(item.id,item.count,item.selected).then(
          res=>{
            console.log(res);
          }
      )
    },
   on_selected_all: function(){

            var selected = !this.selected_all;

                allcart(selected).then(response => {
                    for (var i=0; i<this.item.length;i++){
                        this.item[i].selected = selected;
                    }
                })
                .catch(error => {
                    console.log(error);
                })
        },

  },
  created() {

  getcart().then(
      res=>{
        // console.log(res);
        this.item=res.cart_skus
         this.totalprice()
      }

  )

  }}

</script>

<style scoped>
#cart{
  background-color: rgb(247,248,250);
  height: 1000px;
}
.submit{

background-color: wheat;
}
.submit_big{
  position: relative;
  margin-left: 32px;
}
.checkbox-submit{
  position: absolute;
  left: 1px;
  top: 1px;
}
.check_btn{
  margin-top: 30px;

}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
 .count button {
    margin: 0 5px;
    width: 20px;
    height: 20px;
    line-height: 10px;
    /*color: var(--color-high-text);*/
   color: black;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
  }

   .count span {
     color: red;
   }
   .count{
     width: 70px;
   }
   img{
     margin-left: 23px!important;
     /*padding-left: 10px;*/
   }
   .checkbox_item{
     position: relative;;
     left: -22px;
     top: 42px;
   }
</style>